import initShader from '../utils/initShader-square04'
import {mat4} from 'gl-matrix'

const canvasElement = document.createElement('canvas');

canvasElement.width = 600;
canvasElement.height = 600;
canvasElement.style.backgroundColor = '#000';
document.body.appendChild(canvasElement);

const gl = canvasElement.getContext('webgl'); //3d 上下文对象
const program = initShader(gl)

const verteices = new Float32Array([
  -0.5,-0.5,
  0.5,-0.5,
  0,0.5,
])
const buffer = gl.createBuffer() //创建buffer
gl.bindBuffer(gl.ARRAY_BUFFER, buffer) //绑定buffer
gl.bufferData(gl.ARRAY_BUFFER, verteices, gl.STATIC_DRAW) // 填充buffer

// 解析顶点数据到a_position上
const a_position = gl.getAttribLocation(program, 'a_position') //获取属性的位置
gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 2 * Float32Array.BYTES_PER_ELEMENT, 0) // 告诉webgl如何解析buffer中的数据
gl.enableVertexAttribArray(a_position) // 启用a_position属性


const u_matrix_position = gl.getUniformLocation(program, 'u_matrix')

let matrix = mat4.create()// 创建矩阵 4*4的单位矩阵

// --------------------平移-----------------------
// 平移无法实现
let translateVector = [1, 0, 0]
// matrixT = matrix * translateVector    matrix不变
mat4.translate(matrix, matrix, translateVector) // 平移
// console.log(matrix);

// // mat4.fromTranslation(matrix, translateVector) // 平移


// --------------------缩放---------------------------
// let scaleVector = [0.1, 0.1, 0.0]
/**
 * 用于对矩阵进行缩放变换，根据输入的缩放向量，对矩阵的每一维度进行缩放。​
    out：接收结果的矩阵。​
    a：要进行缩放变换的原始矩阵。​
    v：表示缩放因子的向量。
 */
// mat4.scale(matrix, matrix, scaleVector) // 缩放
/**
 * 用于生成一个按指定向量进行缩放的 4x4 矩阵，并将结果存储在 out 矩阵中。​
    out：接收结果的矩阵。​
    v：表示缩放因子的 3 元素数组 [x, y, z]
 */
// mat4.fromScaling(matrix, scaleVector) // 缩放


// --------------------旋转------------------------------
// let rotateAngle = 30
// let rad = Math.PI / 180 * rotateAngle
/**
 * 用于对 4x4 矩阵应用旋转变换的方法，旋转后的结果存储在目标矩阵上，不影响源矩阵。​
  参数outMatrix：目标矩阵，存储旋转变换后的结果​
  参数sourceMatrix：源矩阵，待旋转的矩阵​
  参数rad：旋转角度，以弧度为单位​
  参数axis：旋转轴，绕哪个轴旋转，是一个3维向量
 */
// mat4.rotate(matrix, matrix, rad, [0,0, 1])
/**
 * 根据给定的旋转角度和旋转轴生成一个 4x4 旋转矩阵，并将结果存储在 out 矩阵中。​
  out：接收结果的矩阵。​
  rad：旋转的角度（以弧度为单位）。​
  axis：表示旋转轴的 3 元素数组 [x, y, z]。
 */
// mat4.fromRotation(matrix, rad, [0,0, 1])

// 绕某一轴旋转
// mat4.fromZRotation(matrix, rad)

gl.uniformMatrix4fv(u_matrix_position, false, matrix)


gl.drawArrays(gl.TRIANGLES, 0, 3)

